<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <style>
        #container {
            margin: 100px auto;
            width: 556px;
            height: 265px;
            /* border: 1px solid red; */
        }
        
        #container ul {
            margin-top: 5px;
            margin-left: 16px;
            width: 400px;
            height: 160px;
            /* border: 1px solid red; */
        }
        
        #container ul li {
            font-size: 12px;
        }
        
        #container .footer {
            margin-top: 16px;
            margin-left: 5px;
            width: 520px;
            height: 22px;
            /* border: 1px solid red; */
        }
    </style>
</head>

<body>
    <div id="container">
        <ul>
            <li>
                <button class="stu" id="stu_btn">-</button>
                <span class="number">1</span>件
                <button class="add" id="add_btn">+</button> <span class="price_number">4.00</span>元结果：
                <input type="text" name="price" id="price" value="4元">
            </li>
            <li>
                <button class="stu" id="stu_btn">-</button>
                <span class="number">1</span>件
                <button class="add" id="add_btn">+</button> <span class="price_number">1.00</span>元结果：
                <input type="text" name="price" id="price" value="1元">
            </li>
            <li>
                <button class="stu" id="stu_btn">-</button>
                <span class="number">1</span>件
                <button class="add" id="add_btn">+</button> <span class="price_number">1.00</span>元结果：
                <input type="text" name="price" id="price" value="1元">
            </li>
            <li>
                <button class="stu" id="stu_btn">-</button>
                <span class="number">0</span>件
                <button class="add" id="add_btn">+</button> <span class="price_number">1.00</span>元结果：
                <input type="text" name="price" id="price">
            </li>
            <li>
                <button class="stu" id="stu_btn">-</button>
                <span class="number">1</span>件
                <button class="add" id="add_btn">+</button> <span class="price_number">1.00</span>元结果：
                <input type="text" name="price" id="price" value="1元">
            </li>
            <li>
                <button class="stu" id="stu_btn">-</button>
                <span class="number">0</span>件
                <button class="add" id="add_btn">+</button> <span class="price_number">1.00</span>元结果：
                <input type="text" name="price" id="price">
            </li>
            <li>
                <button class="stu" id="stu_btn">-</button>
                <span class="number">0</span>件
                <button class="add" id="add_btn">+</button> <span class="price_number">1.00</span>元结果：
                <input type="text" name="price" id="price">
            </li>
        </ul>
        <div class="footer">
            <button class="all_shop">商品总计</button> <input type="text" name="total_number" id="total_number" value="4件">
            <button class="price_all">价格总计:</button> <input type="text" name="total_price" id="total_price" value="7元">

        </div>
    </div>
    <script>
        // 思路分析：
        //   1.点击- 件数减一  点击+件数加一
        //   2. 文本框的值 = 件数 * 价格
        //   3.商品 件数 = 获取每一个li中件数之和
        //   4.价格总计  = 获取每个文本框的值之和

        // 获取-按钮

        let stu_btn = $("#stu_btn");


        // 获取+按钮
        let add_btn = $("#add_btn");
        //获取li的件数
        let number = $(".number");
        //  获取li的价格
        let price_number = $(".price_number");
        // 获取li的文本框
        let price = $("#price");
        // 获取商品总计按钮
        let all_shop = $(".all_shop")[0];
        // 获取商品总计文本框
        let total_number = $("#total_number")[0];
        // 获取价格总计
        let price_all = $(".price_all")[0];
        // 获取价格总计文本框
        let total_price = $("#total_price")[0];
        // console.log(all_shop);
        console.log(total_number);
        for (let i = 0; i < 7; i++) {
            add_btn[i].onclick = function() {
                number[i].innerHTML = +number[i].innerHTML + 1;
                price[i].value = parseInt(price_number[i].innerHTML) * parseInt(number[i].innerHTML) + "元";
                console.log(price[i].innerHTML);
                // console.log(number[i]);
            }
            stu_btn[i].onclick = function() {
                number[i].innerHTML = +number[i].innerHTML - 1;
                price[i].value = parseInt(price_number[i].innerHTML) * (+number[i].innerHTML) + "元";
                // console.log(number[i]);
            }

        }

        all_shop.onclick = function() {
            let sum1 = 0;
            for (let i = 0; i < number.length; i++) {
                sum1 += +(number[i].innerHTML);
            }


            total_number.value = sum1 + "件";
        }


        price_all.onclick = function() {
            let sum2 = 0;
            for (let j = 0; j < price.length; j++) {
                if (price[j].value == '') {
                    var p = +price[j].value;

                } else {
                    var p = parseInt(price[j].value);
                    sum2 += p;
                }



            }

            total_price.value = sum2 + "元";
        }






        // function stuClick() {
        //     for (let k = 0; k < 7; k++) {
        //         console.log(k);
        //         number[k].innerHTML = number[k].innerHTML - 1;
        //     }


        // }

        function $(select) {
            return document.querySelectorAll(select);
        }
    </script>
</body>

</html>